<template>
  <Page header="提现审核"  is-back>
    <view class="order">
      <div class="order-list" v-if="orderList.length">
        <div class="order-item" v-for="item in orderList" :key="item.id">
          <div class="order-header" style="display: flex;">
            <span>{{ item.create_time }}</span>
            <span style="flex-shrink: 0;margin-left: 20px;font-size: 20px;font-weight: bold" :style="{ color: status === 1 ? 'green' : 'red'}">
              {{ status === 1 ? '+' : '' }}
              {{ item.amount}}元
            </span>
          </div>
          <u-line></u-line>
          <div class="order-header" style="display: flex;">
            <span>
               {{ item.user ? item.user.nickname : '' }}——
              {{ item.desc }}</span>
            <span style="flex-shrink: 0;margin-left: 20px;color: #fa3534;font-weight: bold" v-if="item.status === -1">待审核</span>
          </div>
          <u-line></u-line>
          <div class="card-footer" style="width: 100%">
            <div style="display: flex;align-items: center;padding-top: 24rpx;justify-content: flex-end;width: 100%">
              <div class="primary-button" @click="pass(item)">通过</div>
              <div style="width: 12px"></div>
              <div class="primary-button" style="background-color: red" @click="reject(item)">拒绝</div>
            </div>
          </div>
        </div>
      </div>
    </view>
  </Page>
</template>

<script>
import Page from "../../components/Page.vue";

export default {
  components: {Page},
  data() {
    return {
      tabsIndex: 0,
      allList: [
        {tabId: 1,name: '收入', status: 'wait_food'},
        {tabId: 2,name: '提现', status: 'wait_received'},
      ],
      action:  this.$baseUrl + '/api/upload/file',

      orderList: [],
      baseUrl: this.$baseUrl,
      backShow: false,
      currentOrder: {},
      backReason: '',
      deleteShow: false,
      commentShow: false,
      comment: '',
      status: 'all',
      form: {
        staff_remark: '',
        fileList: []
      }
    }
  },
  onShow() {
    this.status = this.allList[this.tabsIndex].tabId
    this.getOrderList()
  },
  methods: {
    getOrderList() {
      uni.showLoading({
        title: '加载中'
      })
      this.$api.balanceList({
        status: -1
      }).then(res => {
        this.orderList = res
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        uni.hideLoading()

        uni.stopPullDownRefresh()
      })
    },
    tabClick(index){
      this.tabsIndex = index
      this.status = this.allList[index].tabId
      this.getOrderList()
    },
    pass(item) {
      this.$api.updateBalance({
        id: item.id,
        status: 1
      }).then(() => {
        uni.showToast({
          title: '操作成功',
          icon: 'none'
        })
        this.getOrderList()
      })
    },
    reject(item) {
      this.$api.updateBalance({
        id: item.id,
        status: 0
      }).then(() => {
        uni.showToast({
          title: '操作成功',
          icon: 'none'
        })
        this.getOrderList()
      })
    },
  },
  // 下拉刷新结束
  onPullDownRefresh() {
    this.getOrderList()
  },
}
</script>

<style scoped lang="scss">
.order {
  height: 100%;
  overflow: auto;

  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
}

.order-list {
  padding: 20rpx;
}
.order-item {
  border-radius: 10rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
  }
  .button-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
  }
  .total {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 40rpx;
  }
  .coupon {
    color: #dd6161;
  }
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .car-item {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      color: #323233;
      font-size: 24rpx;
      background-color: #FFFFFF;
      display: flex;
      border-bottom: 1px solid #f7f8fa;
      .goods-detail {
        margin-left: 10px;
        flex-grow: 1;
        .goods-name {
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 10px;
        }
        .goods-price-box {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: #f15929;
            font-size: 28rpx;
          }
          .goods-count {
            display: flex;
            .goods-count-value{
              margin: 0 10px;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>
